<template>
  <NodeViewWrapper contenteditable="false" class="vue-component" ref="ViewWrapper" @click="handleClick">
    <div contenteditable="false" class="pause_content" :style="{
      'background-color': isSelect ? '#a6d2ff' : '#00000000'
    }">
      <a-popover trigger="click">
        <template #content>
          <div style="border-radius: 5px; width: 198px; height: 185px;">
            <div class="box_1_top" style="border-bottom: 1px solid #e8e8e8;">
              <div v-for="(v1, index) in TimeData" :key="index" @click="pauseItem(v1)">
                <div class="box_1_top_item" style="height: 36px; line-height: 36px;  cursor: pointer;">
                  {{ v1.label }}
                </div>
              </div>
            </div>
            <!-- 插入停顿 -->
            <div class="box_1_bottom" style="
                  display: flex;  
                  justify-content: space-around; 
                  align-items: center; ; 
                  padding: 5px 0;
                  border-bottom: 1px solid #e8e8e8;">
              <div class="box_1_left">
                自定义
              </div>
              <div class="box_1_content">
                <a-input-number v-model:value="getTime" :max="10" :precision="1" :min="0.1" :step="0.1"
                  :controls="false" :bordered="false" type="number"
                  style="width: 80px; height: 32px; background-color: #f4f4f4;" />
              </div>
              <div class="box_1_right">
                <a-button @click="insertStop">确认</a-button>
              </div>
            </div>

            <div class="box_1_del" style="height: 36px; display: flex; align-items: center; margin-top: 3px;"
              @click="del_node">
              移除
            </div>
          </div>
        </template>
        <!-- contenteditable="false" -->
        <span class="pause_text" contenteditable="false">
          <ClockCircleFilled />
          {{ props.node.attrs.time}}
          <!-- {{ (parseFloat(props.node.attrs.time.replace(/[^0-9.]/g, ''))).toFixed(1) + ' s' }} -->
        </span>
      </a-popover>
    </div>
    <NodeViewContent class="content" />
  </NodeViewWrapper>
</template>

<script setup>
import { NodeViewContent, NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'

import { computed, ref } from 'vue'

import { message } from 'ant-design-vue'

import {
  LoadingOutlined,
  PauseOutlined,
  CaretRightOutlined,
  ClockCircleOutlined,
  ClockCircleFilled
} from "@ant-design/icons-vue";

const TimeData = ref([
  {
    label: "0.5s(短)",
    value: 0.5
  },
  {
    label: "1s(中)",
    value: 1
  },
  {
    label: "2s(长)",
    value: 2
  },
])

const time = ref(null)

const getTime = computed({
  get() {
    return time.value ? time.value : null
  },
  set(val) {
    time.value = val
  }
})

const props = defineProps({
  node: Object,
  editor: Object
})

const del_node = () => {
  console.log(props.node, "删除节点");
  const pos = props.getPos(); // 获取当前节点的位置
  props.editor.chain()
    .focus()
    .setNodeSelection(pos)
    .deleteSelection()
    .run()
}

// 判断是否选中
const isSelect = computed(() => {
  return props.selected
})

const handleClick = () => {
  // debugger
  console.log(props);
  // const pos = props.getPos(); // 获取当前节点的位置
  // props.editor.commands.setNodeSelection(pos); // 设置选中状态
}
const pauseItem = (data) => {
  const time = data.value + 's'
  props.node.attrs.time = time
  console.log(props.node.attrs.time,'选择的停顿时间???');
  
}

// 插入停顿 点击确定
const insertStop = () => {
  if (!getTime.value) {
    return message.warning('请输入停顿时间')
  } else if (!/^[0-9]+(.[0-9]{1,2})?$/.test(+getTime.value)) {
    return message.warning('请输入正确的停顿时间')
  } else if (+getTime.value < 0.1) {
    return message.warning('停顿时间不能小于0.1秒')
  } else if (+getTime.value > 10) {
    return message.warning('停顿时间不能大于10秒')
  }
  props.node.attrs.time = getTime.value + 's'

}




</script>

<style lang="less" scoped>
.vue-component {
  display: inline-block;
  margin-right: 2px;

  .pause_content {
    color: #fff;
    width: 50px;
    height: 100%;
    padding: 3px 0;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 2px;
    overflow: hidden;

    .pause_text {
      display: inline-block;
      width: 100%;
      background-color: #128b7e;
      text-align: center;
      border-radius: 3px;
      line-height: 1;
      padding: 2px 0;
    }
  }

}

:deep(.ss-popover-inner-content) {
  padding: 0px !important;
}

:deep(.ss-input) {
  background-color: #f4f4f4 !important;
}


:deep(.ss-popover-inner) {
  border-radius: 5px !important;
}

.box_1_top_item:hover,
.hover-class {
  background-color: #f4f4f4;
}


.box_1_del:hover {
  background-color: #f4f4f4;
}
</style>